<template>
  <div class="song-item" @click="handlePlay">
    <span v-if="index" class="index">{{ index }}</span>
    <img v-else :src="song.album?.picUrl || song.picUrl" :alt="song.name" class="cover">
    <div class="info">
      <div class="name">{{ song.name }}</div>
      <div class="artists">
        {{ song.artists?.map(artist => artist.name).join(' / ') }}
      </div>
    </div>
    <div class="album" v-if="song.album">
      <router-link :to="`/album/${song.album.id}`">
        {{ song.album.name }}
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SongInfo } from '@/types'

const props = defineProps<{
  song: SongInfo
  index?: number
}>()

const handlePlay = () => {
  // TODO: 实现播放功能
  console.log('Play song:', props.song)
}
</script>

<style scoped>
.song-item {
  display: grid;
  grid-template-columns: 60px 1fr 200px 200px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.song-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.index {
  color: #999;
  text-align: center;
}

.cover {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
  object-fit: cover;
}

.info {
  flex: 1;
  min-width: 0;
}

.name {
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artists {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album a {
  color: inherit;
  text-decoration: none;
}

.album a:hover {
  color: var(--primary-color);
}
</style> 